<template>
  <!-- 专业检索提示 -->
  <div>
      <!-- 检索不为空时 -->
      <div v-if="searchTxt !=='' && ( sqHistory.length>0 || sqExp.length>0 )" class="search-tips">
        <vue-scroll ref="vs" :ops="scrollOps">
          <div v-show="sqHistory.length>0" class="tips-box">
            <h6 class="tit">历史记录</h6>
            <p class="box">
              <span v-for="(item, index) in sqHistory" :key="index" @click="chooseTips({key: item.key, isSearch: true})" v-html="item.value"></span>
            </p>
          </div>
          <div v-show="sqExp.length>0" class="tips-box">
            <h6 class="tit">检索提示</h6>
            <p class="box">
              <span v-for="(item, index) in sqExp" :key="index" @click="chooseTips2({item: item, isSearch: false})">
                <span v-html="item.value"></span>
              </span>
            </p>
          </div>
        </vue-scroll>
      </div>
      <!-- 检索为空时 -->
      <div v-if="searchTxt===''&&searches.length>0" class="search-tips">
        <ul class="field-box">
          <vue-scroll :ops="scrollOps">
            <li v-for="(item, index) in searches" :key="index" class="field-item-box">
              <h6 class="tit">{{item.title}}</h6>
              <ul class="content-box">
                  <li v-for="(ite, j) in item.content" :key="j" @click="chooseTips({key: ite.key, isSearch: false})" class="content-item-box">
                    <el-popover
                      placement="right-start"
                      trigger="hover"
                      width="200"
                      class="popover">
                      <p slot="reference" class="info"><i>{{ite.key}}</i><span>{{ite.value}}</span></p>
                      <div class="field-content" v-html="ite.description"></div>
                    </el-popover>
                  </li>
              </ul>
            </li>
          </vue-scroll>
        </ul>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import {wordLight} from '@/utils/utils'
export default {
  props: {
    searchTxt: {
      type: String
    }
  },
  data() {
    return {
      sqHistory: [],
      sqExp: [],
      searches: [],
      scrollOps: {
        vuescroll: {
          mode: 'native',
          sizeStrategy: 'number',
          detectResize: true,
          wheelScrollDuration: 200
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
          speed: 1000,
          // easing: 'easeInQuad',
          maxHeight: 360
        },
        rail: {
          size: '9px',
          gutterOfEnds: '10px',
          gutterOfSide: '0px',
          keepShow: true,
        },
        bar: {
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: '#adc2ca',
          size: '9px'
        },
      },
    }
  },
  methods: {
    // 专业检索提示
    getProfessionalSearchTips() {
      let ths = this
      let debounce = _.debounce(() => {
        if (ths.professionalSearchTipsCancel) {
          ths.professionalSearchTipsCancel()
        }
        
        ths.$get(`${ths.$Url.search.promptSpecialty}?loading=false`, {
          sq: ths.searchTxt
        }, new axios.CancelToken(function executor(c){
          ths.professionalSearchTipsCancel = c
        })).then(res => {
          let data = res.data
          if (data) {
            // 历史记录
            let sqHistory = []
            data.sqHistory.forEach((v, i) => {
              let text = wordLight(v, this.searchTxt)
              sqHistory.push({
                key: v,
                value: text
              })
            })
            this.sqHistory = sqHistory
            // 检索匹配
            let sqExp = []
            data.sqExp.forEach(v => {
              let key = v.searchMsg
              let value = wordLight(v.displayMsg, this.searchTxt)
              sqExp.push({
                key,
                value
              })
            })
            this.sqExp = sqExp
          }
        }).catch(err => {})
      }, 100)
      debounce()
    },
    // 专业检索语法提示
    getPromptSpecialtyAll() {
      this.$get(`${this.$Url.search.promptSpecialtyAll}`,
      {
        loading: false
      })
        .then(res => {
          let data = res.data
          if (data) {
            let newData = []
            let keys = Object.keys(data)
            let values = Object.values(data)
            keys.forEach((v, index) => {
              newData.push({
                title: v,
                content: values[index]
              })
            })

            this.searches = newData

          }
        }).catch(err => {})
    },
    chooseTips(item) {
      this.$emit('chooseTips', item)
    },
    chooseTips2(item) {
      this.$emit('chooseTips2', item)
    },
  },
  watch: {
    searchTxt() {
      if (this.searchTxt !== '') {
        this.getProfessionalSearchTips()
      } else {
        this.getPromptSpecialtyAll()
      }
      
    }
  },
  beforeMount() {
    if (this.searchTxt !== '') {
      this.getProfessionalSearchTips()
    } else {
      this.getPromptSpecialtyAll()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-tips {
  position: relative;
  top: 6px;
  left: 0;
  width: calc(100%);
  // height: calc(50vh);
  // max-height: 200px;
  // max-height: calc((100vh - 60px - 40px) / 1.5);
  padding: 0 10px;
  border: 2px solid $color141;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.95);
  // overflow-x: hidden;
  // overflow-y: auto;
  z-index: 2;


  // width: 100%;
  // max-height: calc(100vh - 160px - 60px);
  // padding: 0 10px 10px;
  // border: 1px solid $color141;
  // border-top-width: 2px;
  // box-sizing: border-box;
  // text-align: left;
  // background-color: #fff;
  // overflow-x: hidden;
  // overflow-y: auto;
  // z-index: 2;
  .tit {
    line-height: normal;
    padding-left: 16px;
    margin-top: 20px;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 14px;
    color: $color6;
  }
  .box {
    position: relative;
    line-height: 1.6;
    margin-top: 0;
    font-size: 14px;
    > span {
      display: block;
      line-height: 30px;
      padding: 0 16px;
      border-radius: 4px;
      cursor: pointer;
      &:hover {
        background-color: $color144;
      }
    }
  }
  .field-box {
    position: relative;
    list-style: none;
    .field-item-box {
      display: block;
      .tit {
        height: 26px;
        line-height: 26px;
        padding-left: 16px;
        margin: 4px 0;
        font-size: 14px;
        color: $mainColor;
      }
      .content-box {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        font-size: initial;
        .content-item-box {
          width: 50%;
          border-radius: 2px;
          margin-bottom: 5px;
          cursor: pointer;
          &:hover {
            background-color: $color144;
          }
          ::v-deep {
            .popover {
              width: 100%;
            }
          }
          .info {
            position: relative;
            display: inline-flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            min-height: 40px;
            margin-top: 0;
            margin-bottom: 0;
            i {
              width: 60px;
              line-height: 20px;
              // padding: 3px 10px;
              border-radius: 2px;
              margin-left: 16px;
              text-align: center;
              font-style: normal;
              font-size: 12px;
              color: $color150;
              background-color: $color141;
            }
            span {
              line-height: 24px;
              padding: 0 10px;
              // padding: 4px 10px;
              border-radius: 2px;
              text-align: right;
              font-size: 13px;
            }
          }
          
        }
      }
    }
  }
  // .field-box {
  //   display: flex;
  //   .field, .field-base {
  //     flex: 1;
  //     flex-wrap: wrap;
  //     margin-top: 0;
  //     margin-bottom: 0;
  //     dd {
  //       width: 100%;
  //       display: inline-flex;
  //       align-items: center;
  //       justify-content: space-between;
  //       height: 26px;
  //       margin-left: 0;
  //       border-radius: 3px;
  //       cursor: pointer;
  //       &:hover {
  //         background-color: #eee;
  //       }
  //       i {
  //         padding: 3px 10px;
  //         border-radius: 3px;
  //         font-style: normal;
  //         font-size: 12px;
  //         color: #fff;
  //         background-color: $color37;
  //         cursor: pointer;
  //       }
  //       span {
  //         line-height: 24px;
  //         padding: 4px 10px;
  //         border-radius: 2px;
  //         font-size: 13px;
  //       }
  //     }
  //   }
  //   .field {
  //     &:nth-of-type(2n-1) {
  //       padding-right: 5%;
  //     }
  //   }
  //   .field-base {
  //     .base-d {
  //       display: flex;
  //       .base-d-d {
  //         flex: 1;
  //         &:nth-of-type(2n-1) {
  //           padding-right: 5%;
  //         }
  //       }
  //     }
  //   }
  // }
}
</style>